<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UC-KB-001：知识内容管理原型</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.12.8/dist/reset.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: #fff;
            padding: 16px 24px;
            border-bottom: 1px solid #e8e8e8;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        
        .breadcrumb a {
            color: #1890ff;
            text-decoration: none;
        }
        
        .main-content {
            display: flex;
            height: calc(100vh - 80px);
        }
        
        .sidebar {
            width: 280px;
            background: #fff;
            border-right: 1px solid #e8e8e8;
            overflow-y: auto;
        }
        
        .content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .search-toolbar {
            background: #fff;
            padding: 16px 20px;
            border-bottom: 1px solid #e8e8e8;
        }
        
        .search-row {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .search-box {
            flex: 1;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 8px 40px 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .search-box input:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
        
        .search-filters {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .filter-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .filter-item label {
            font-size: 12px;
            color: #666;
        }
        
        .filter-item select {
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .knowledge-list {
            flex: 1;
            background: #fff;
            overflow-y: auto;
        }
        
        .list-header {
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .list-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .list-actions {
            display: flex;
            gap: 8px;
        }
        
        .btn {
            padding: 6px 12px;
            border: 1px solid;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .btn-primary:hover {
            background: #40a9ff;
            border-color: #40a9ff;
        }
        
        .btn-default {
            background: #fff;
            border-color: #d9d9d9;
            color: #333;
        }
        
        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .knowledge-item {
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .knowledge-item:hover {
            background: #f8f9fa;
        }
        
        .knowledge-item.selected {
            background: #e6f7ff;
            border-left: 3px solid #1890ff;
        }
        
        .knowledge-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 8px;
        }
        
        .knowledge-meta {
            display: flex;
            gap: 16px;
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .knowledge-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .knowledge-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        
        .tag {
            padding: 2px 6px;
            background: #f0f0f0;
            color: #666;
            border-radius: 3px;
            font-size: 11px;
        }
        
        .tag.primary {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .knowledge-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        
        .action-link {
            color: #1890ff;
            text-decoration: none;
            font-size: 12px;
            cursor: pointer;
        }
        
        .action-link:hover {
            text-decoration: underline;
        }
        
        .action-link.danger {
            color: #ff4d4f;
        }
        
        .sidebar-section {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .sidebar-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
        }
        
        .category-tree {
            list-style: none;
        }
        
        .category-item {
            padding: 4px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .category-item:hover {
            background: #f8f9fa;
        }
        
        .category-item.active {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .category-icon {
            font-size: 12px;
        }
        
        .category-name {
            font-size: 13px;
        }
        
        .category-count {
            font-size: 11px;
            color: #999;
            margin-left: auto;
        }
        
        .filter-group {
            margin-bottom: 16px;
        }
        
        .filter-group-title {
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
        }
        
        .filter-options {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .filter-option {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .filter-option input[type="checkbox"] {
            margin: 0;
        }
        
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        
        .tag-cloud .tag {
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .tag-cloud .tag:hover {
            background: #1890ff;
            color: #fff;
        }
        
        .pagination {
            padding: 16px 20px;
            background: #fafafa;
            border-top: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .pagination-info {
            color: #666;
            font-size: 12px;
        }
        
        .pagination-controls {
            display: flex;
            gap: 8px;
            align-items: center;
        }
        
        .page-btn {
            padding: 4px 8px;
            border: 1px solid #d9d9d9;
            background: #fff;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .page-btn:hover {
            border-color: #1890ff;
            color: #1890ff;
        }
        
        .page-btn.active {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }
        
        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            max-width: 800px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        
        .form-item {
            margin-bottom: 16px;
        }
        
        .form-item label {
            display: block;
            font-size: 14px;
            color: #333;
            margin-bottom: 4px;
            font-weight: 500;
        }
        
        .form-item label.required::after {
            content: ' *';
            color: #ff4d4f;
        }
        
        .form-item input,
        .form-item textarea,
        .form-item select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .form-item input:focus,
        .form-item textarea:focus,
        .form-item select:focus {
            outline: none;
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .form-item textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .form-row {
            display: flex;
            gap: 16px;
        }
        
        .form-row .form-item {
            flex: 1;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 20px;
        }
        
        .btn-large {
            padding: 10px 20px;
            font-size: 14px;
        }
        
        .search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-top: none;
            border-radius: 0 0 6px 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            z-index: 100;
            display: none;
        }
        
        .suggestion-item {
            padding: 8px 12px;
            cursor: pointer;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .suggestion-item:hover {
            background: #f8f9fa;
        }
        
        .suggestion-item:last-child {
            border-bottom: none;
        }
        
        .suggestion-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 2px;
        }
        
        .suggestion-meta {
            font-size: 12px;
            color: #666;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        
        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: #d9d9d9;
        }
        
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                height: auto;
                max-height: 200px;
            }
            
            .search-filters {
                flex-direction: column;
                align-items: stretch;
            }
            
            .form-row {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div class="header">
        <div class="breadcrumb">
            <a href="#">首页</a> > 知识库管理
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <!-- 分类导航 -->
            <div class="sidebar-section">
                <div class="sidebar-title">知识分类</div>
                <ul class="category-tree">
                    <li class="category-item active">
                        <span class="category-icon">📁</span>
                        <span class="category-name">安全规范</span>
                        <span class="category-count">(25)</span>
                    </li>
                    <li class="category-item">
                        <span class="category-icon">📁</span>
                        <span class="category-name">操作指南</span>
                        <span class="category-count">(30)</span>
                    </li>
                    <li class="category-item">
                        <span class="category-icon">📁</span>
                        <span class="category-name">质量标准</span>
                        <span class="category-count">(20)</span>
                    </li>
                    <li class="category-item">
                        <span class="category-icon">📁</span>
                        <span class="category-name">设备说明</span>
                        <span class="category-count">(15)</span>
                    </li>
                </ul>
            </div>

            <!-- 筛选条件 -->
            <div class="sidebar-section">
                <div class="sidebar-title">筛选条件</div>
                
                <div class="filter-group">
                    <div class="filter-group-title">语言</div>
                    <div class="filter-options">
                        <label class="filter-option">
                            <input type="checkbox" checked>
                            <span>中文 (45)</span>
                        </label>
                        <label class="filter-option">
                            <input type="checkbox">
                            <span>英文 (12)</span>
                        </label>
                        <label class="filter-option">
                            <input type="checkbox">
                            <span>越南语 (8)</span>
                        </label>
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-group-title">状态</div>
                    <div class="filter-options">
                        <label class="filter-option">
                            <input type="checkbox" checked>
                            <span>已发布 (65)</span>
                        </label>
                        <label class="filter-option">
                            <input type="checkbox">
                            <span>草稿 (5)</span>
                        </label>
                        <label class="filter-option">
                            <input type="checkbox">
                            <span>已归档 (3)</span>
                        </label>
                    </div>
                </div>

                <div class="filter-group">
                    <div class="filter-group-title">标签</div>
                    <div class="tag-cloud">
                        <span class="tag primary">安全</span>
                        <span class="tag">操作</span>
                        <span class="tag">规范</span>
                        <span class="tag">设备</span>
                        <span class="tag">维护</span>
                        <span class="tag">培训</span>
                    </div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="sidebar-section">
                <div class="sidebar-title">快速操作</div>
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <button class="btn btn-primary" onclick="createKnowledge()">📝 新建知识</button>
                    <button class="btn btn-default" onclick="importKnowledge()">📤 导入</button>
                    <button class="btn btn-default" onclick="exportKnowledge()">📥 导出</button>
                </div>
            </div>
        </div>

        <!-- 中间内容区域 -->
        <div class="content-area">
            <!-- 搜索工具栏 -->
            <div class="search-toolbar">
                <div class="search-row">
                    <div class="search-box">
                        <input type="text" placeholder="搜索知识内容..." id="searchInput">
                        <span class="search-icon">🔍</span>
                        <div class="search-suggestions" id="searchSuggestions">
                            <div class="suggestion-item">
                                <div class="suggestion-title">安全操作规范</div>
                                <div class="suggestion-meta">安全规范 • 中文 • 已发布</div>
                            </div>
                            <div class="suggestion-item">
                                <div class="suggestion-title">设备维护指南</div>
                                <div class="suggestion-meta">操作指南 • 中文 • 已发布</div>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary" onclick="searchKnowledge()">搜索</button>
                    <button class="btn btn-default" onclick="openAdvancedSearch()">高级搜索</button>
                </div>
                
                <div class="search-filters">
                    <div class="filter-item">
                        <label>分类:</label>
                        <select>
                            <option value="">全部分类</option>
                            <option value="safety">安全规范</option>
                            <option value="operation">操作指南</option>
                            <option value="quality">质量标准</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>语言:</label>
                        <select>
                            <option value="">全部语言</option>
                            <option value="zh">中文</option>
                            <option value="en">英文</option>
                            <option value="vi">越南语</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态:</label>
                        <select>
                            <option value="">全部状态</option>
                            <option value="published">已发布</option>
                            <option value="draft">草稿</option>
                            <option value="archived">已归档</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>排序:</label>
                        <select>
                            <option value="relevance">相关度</option>
                            <option value="time">时间</option>
                            <option value="title">标题</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 知识列表 -->
            <div class="knowledge-list">
                <div class="list-header">
                    <div class="list-title">知识列表 (共 25 条)</div>
                    <div class="list-actions">
                        <button class="btn btn-default" onclick="refreshList()">🔄 刷新</button>
                        <button class="btn btn-default" onclick="batchEdit()">📝 批量编辑</button>
                    </div>
                </div>

                <div class="knowledge-item selected" onclick="selectKnowledge(this)">
                    <div class="knowledge-title">安全操作规范</div>
                    <div class="knowledge-meta">
                        <span>分类: 安全规范</span>
                        <span>语言: 中文</span>
                        <span>状态: 已发布</span>
                        <span>作者: 张三</span>
                        <span>更新时间: 2024-05-15 15:30</span>
                    </div>
                    <div class="knowledge-content">
                        操作前必须佩戴安全防护用品，确保工作环境安全。严格按照操作规程执行，不得擅自改变操作流程。发现安全隐患应立即停止操作并上报...
                    </div>
                    <div class="knowledge-tags">
                        <span class="tag primary">安全</span>
                        <span class="tag">操作</span>
                        <span class="tag">规范</span>
                    </div>
                    <div class="knowledge-actions">
                        <a href="#" class="action-link" onclick="viewKnowledge(event)">查看</a>
                        <a href="#" class="action-link" onclick="editKnowledge(event)">编辑</a>
                        <a href="#" class="action-link" onclick="copyKnowledge(event)">复制</a>
                        <a href="#" class="action-link danger" onclick="deleteKnowledge(event)">删除</a>
                    </div>
                </div>

                <div class="knowledge-item" onclick="selectKnowledge(this)">
                    <div class="knowledge-title">设备维护指南</div>
                    <div class="knowledge-meta">
                        <span>分类: 操作指南</span>
                        <span>语言: 中文</span>
                        <span>状态: 已发布</span>
                        <span>作者: 李四</span>
                        <span>更新时间: 2024-05-15 14:20</span>
                    </div>
                    <div class="knowledge-content">
                        定期检查设备状态，及时更换磨损部件。按照维护计划执行日常保养，确保设备正常运行。记录维护日志，发现问题及时处理...
                    </div>
                    <div class="knowledge-tags">
                        <span class="tag">设备</span>
                        <span class="tag">维护</span>
                        <span class="tag">指南</span>
                    </div>
                    <div class="knowledge-actions">
                        <a href="#" class="action-link" onclick="viewKnowledge(event)">查看</a>
                        <a href="#" class="action-link" onclick="editKnowledge(event)">编辑</a>
                        <a href="#" class="action-link" onclick="copyKnowledge(event)">复制</a>
                        <a href="#" class="action-link danger" onclick="deleteKnowledge(event)">删除</a>
                    </div>
                </div>

                <div class="knowledge-item" onclick="selectKnowledge(this)">
                    <div class="knowledge-title">质量标准说明</div>
                    <div class="knowledge-meta">
                        <span>分类: 质量标准</span>
                        <span>语言: 中文</span>
                        <span>状态: 已发布</span>
                        <span>作者: 王五</span>
                        <span>更新时间: 2024-05-15 13:15</span>
                    </div>
                    <div class="knowledge-content">
                        严格按照质量标准执行生产，确保产品质量符合要求。定期进行质量检查，发现问题及时整改。建立质量档案，记录质量数据...
                    </div>
                    <div class="knowledge-tags">
                        <span class="tag">质量</span>
                        <span class="tag">标准</span>
                        <span class="tag">说明</span>
                    </div>
                    <div class="knowledge-actions">
                        <a href="#" class="action-link" onclick="viewKnowledge(event)">查看</a>
                        <a href="#" class="action-link" onclick="editKnowledge(event)">编辑</a>
                        <a href="#" class="action-link" onclick="copyKnowledge(event)">复制</a>
                        <a href="#" class="action-link danger" onclick="deleteKnowledge(event)">删除</a>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <div class="pagination-info">
                    共 25 条记录，第 1 页/共 2 页
                </div>
                <div class="pagination-controls">
                    <button class="page-btn" disabled>上一页</button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">下一页</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 知识编辑弹窗 -->
    <div class="modal" id="knowledgeEditModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">编辑知识 - 安全操作规范</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-item">
                    <label class="required">知识标题</label>
                    <input type="text" value="安全操作规范">
                </div>
                
                <div class="form-row">
                    <div class="form-item">
                        <label class="required">分类</label>
                        <select>
                            <option value="safety" selected>安全规范</option>
                            <option value="operation">操作指南</option>
                            <option value="quality">质量标准</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label class="required">语言</label>
                        <select>
                            <option value="zh" selected>中文</option>
                            <option value="en">英文</option>
                            <option value="vi">越南语</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-item">
                    <label>标签</label>
                    <input type="text" placeholder="输入标签，用逗号分隔" value="安全,操作,规范">
                </div>
                
                <div class="form-item">
                    <label class="required">知识内容</label>
                    <textarea placeholder="请输入知识内容...">操作前必须佩戴安全防护用品，确保工作环境安全。严格按照操作规程执行，不得擅自改变操作流程。发现安全隐患应立即停止操作并上报。

1. 个人防护
- 佩戴安全帽
- 佩戴防护眼镜
- 穿戴防护服
- 佩戴防护手套

2. 环境检查
- 检查工作区域安全
- 确认设备状态正常
- 检查防护设施完好
- 确认应急通道畅通

3. 操作要求
- 严格按照规程操作
- 不得擅自改变流程
- 发现问题立即停止
- 及时上报异常情况</textarea>
                </div>
                
                <div class="form-row">
                    <div class="form-item">
                        <label>状态</label>
                        <select>
                            <option value="published" selected>已发布</option>
                            <option value="draft">草稿</option>
                            <option value="archived">已归档</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>优先级</label>
                        <select>
                            <option value="high" selected>高</option>
                            <option value="medium">中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="saveKnowledge()">保存</button>
                <button class="btn btn-primary" onclick="publishKnowledge()">发布</button>
            </div>
        </div>
    </div>

    <!-- 高级搜索弹窗 -->
    <div class="modal" id="advancedSearchModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">高级搜索</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-item">
                    <label>搜索关键词</label>
                    <input type="text" placeholder="输入搜索关键词">
                </div>
                
                <div class="form-row">
                    <div class="form-item">
                        <label>搜索范围</label>
                        <select>
                            <option value="all" selected>全部</option>
                            <option value="title">标题</option>
                            <option value="content">内容</option>
                            <option value="tags">标签</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>搜索操作符</label>
                        <select>
                            <option value="contains" selected>包含</option>
                            <option value="equals">等于</option>
                            <option value="starts">开头</option>
                            <option value="ends">结尾</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-item">
                        <label>分类</label>
                        <select>
                            <option value="">全部分类</option>
                            <option value="safety">安全规范</option>
                            <option value="operation">操作指南</option>
                            <option value="quality">质量标准</option>
                        </select>
                    </div>
                    <div class="form-item">
                        <label>语言</label>
                        <select>
                            <option value="">全部语言</option>
                            <option value="zh">中文</option>
                            <option value="en">英文</option>
                            <option value="vi">越南语</option>
                        </select>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-item">
                        <label>创建时间</label>
                        <input type="date" placeholder="开始日期">
                    </div>
                    <div class="form-item">
                        <label>至</label>
                        <input type="date" placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="performAdvancedSearch()">搜索</button>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let selectedKnowledge = null;

        // 搜索功能
        const searchInput = document.getElementById('searchInput');
        const searchSuggestions = document.getElementById('searchSuggestions');

        searchInput.addEventListener('input', (e) => {
            if (e.target.value.length > 2) {
                searchSuggestions.style.display = 'block';
            } else {
                searchSuggestions.style.display = 'none';
            }
        });

        searchInput.addEventListener('blur', () => {
            setTimeout(() => {
                searchSuggestions.style.display = 'none';
            }, 200);
        });

        // 选择知识
        function selectKnowledge(element) {
            document.querySelectorAll('.knowledge-item').forEach(item => {
                item.classList.remove('selected');
            });
            element.classList.add('selected');
            selectedKnowledge = element;
        }

        // 知识操作
        function viewKnowledge(event) {
            event.stopPropagation();
            console.log('查看知识');
        }

        function editKnowledge(event) {
            event.stopPropagation();
            document.getElementById('knowledgeEditModal').style.display = 'flex';
        }

        function copyKnowledge(event) {
            event.stopPropagation();
            console.log('复制知识');
        }

        function deleteKnowledge(event) {
            event.stopPropagation();
            if (confirm('确定要删除这个知识条目吗？')) {
                console.log('删除知识');
            }
        }

        // 创建知识
        function createKnowledge() {
            document.getElementById('knowledgeEditModal').style.display = 'flex';
        }

        // 搜索功能
        function searchKnowledge() {
            const keyword = searchInput.value;
            console.log('搜索知识:', keyword);
        }

        function openAdvancedSearch() {
            document.getElementById('advancedSearchModal').style.display = 'flex';
        }

        function performAdvancedSearch() {
            closeModal();
            console.log('执行高级搜索');
        }

        // 其他功能
        function refreshList() {
            console.log('刷新列表');
        }

        function batchEdit() {
            console.log('批量编辑');
        }

        function importKnowledge() {
            console.log('导入知识');
        }

        function exportKnowledge() {
            console.log('导出知识');
        }

        // 保存知识
        function saveKnowledge() {
            console.log('保存知识');
            closeModal();
        }

        function publishKnowledge() {
            console.log('发布知识');
            closeModal();
        }

        // 弹窗控制
        function closeModal() {
            document.querySelectorAll('.modal').forEach(modal => {
                modal.style.display = 'none';
            });
        }

        // 点击弹窗外部关闭
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal();
                }
            });
        });

        // 分类选择
        document.querySelectorAll('.category-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.category-item').forEach(cat => {
                    cat.classList.remove('active');
                });
                item.classList.add('active');
                console.log('选择分类:', item.querySelector('.category-name').textContent);
            });
        });

        // 标签选择
        document.querySelectorAll('.tag-cloud .tag').forEach(tag => {
            tag.addEventListener('click', () => {
                tag.classList.toggle('primary');
                console.log('选择标签:', tag.textContent);
            });
        });

        // 筛选条件
        document.querySelectorAll('.filter-option input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', () => {
                console.log('筛选条件变更');
            });
        });

        // 搜索建议点击
        document.querySelectorAll('.suggestion-item').forEach(item => {
            item.addEventListener('click', () => {
                const title = item.querySelector('.suggestion-title').textContent;
                searchInput.value = title;
                searchSuggestions.style.display = 'none';
                searchKnowledge();
            });
        });
    </script>
</body>
</html>

